<template>
    <div class="container ssc-wrap">
        <div class="container ssc-topNav">
            <i class="iconfont ssc-back" @click="doBack()">&#xe62f;</i>
            <span class="ssc-ccartTitle">购物车<span v-if="Object.keys(cartInfo).length">({{Object.keys(cartInfo).length}})</span></span>
            <span v-if="!doConfig" class="ssc-modify"><span @click="toggle(Object.keys(cartInfo).length)">编辑</span> <i class="iconfont">&#xe63e;</i></span>
            <span v-if="doConfig" @click="saveModify" class="ssc-finish">完成</span>
        </div>
        <div class="row ssc-content wrapper" ref="wrapper6">
            <!-- 购物车没有商品的样式 -->
            <div class="row ssc-noGoods" v-if="!Object.keys(cartInfo).length">
                <div class="ssc-noGoodsBG">
                    <i class="iconfont">&#xe618;</i>
                </div>
                <span>购物车还是空的哦~</span>
                <router-link to="/main/Home/0" tag="div" class="ssc-goHomePage">
                    去逛逛
                </router-link>
            </div>
            <!-- 购物车有商品的样式 -->
            <div class="ssc-goodsList" v-if="Object.keys(cartInfo).length">
                <div class="ssc-singleGoods" v-for="(v,i) of cartInfo" :key="'cartInfo'+i">
                    <div class="contain">

                        <div class="ssc-select">
                            <input type="checkbox" v-model="selects[i]" @change="changeSingle">
                        </div>
                        <div class="ssc-goodsImage" @click="routerTo(v,i)">
                            <img :src="v.data.img" alt="">
                        </div>
                        <div class="ssc-modifyWrap">
                            <div class="ssc-infoShow" v-if="!doConfig" @click="routerTo(v,i)">
                                <p>
                                    {{v.data.title}}
                                </p>
                                <div class="ssc-priceInfo">
                                    <span class="ssc-priceWrap">
                                        <span>￥{{v.data.price | numFormat}}</span><del>￥{{v.data.orgPrice | numFormat}}</del>
                                    </span>
                                    <span>x{{v.count}}</span>
                                </div>
                            </div>
                            <div class="ssc-modifyArea" v-if="doConfig">
                                <ul class="clear">
                                    <li :class="v.count==1?'cantReduce':''" @click="modifyCount(i,false)">-</li>
                                    <li>{{v.count}}</li>
                                    <li @click="modifyCount(i,true)">+</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <div class="container ssc-bottom" v-if="Object.keys(cartInfo).length">
            <div class="contain">
                <div class="ssc-selectAll">
                    <input type="checkbox" v-model="changeAll" @change="doChangeAll">全选({{howMany()}}) <span v-if="!doConfig">￥{{howMuch() | numFormat}}</span>
                </div>
                <div v-if="!doConfig" class="ssc-bottomRight">去结算</div>
                <div v-if="doConfig" class="ssc-bottomRight" @click="doDelete">删 除</div>
            </div>
        </div>
        <!-- TODO 问旺叔强制反复渲染的dom() -->
        <!-- <div v-if="show" hide="hide"></div> -->
    </div>
</template>
<script>
import Bscroll from "better-scroll";

export default {
  data() {
    return {
      editedCartInfo: null,
      doConfig: false,
      selects: {},
      changeAll: false,
      show: false
    };
  },
  filters: {
    numFormat(v) {
      return v.toLocaleString("zh", {
        minimumFractionDigits: 2,
        useGrouping: false
      });
    }
  },
  methods: {
    routerTo(data, item) {
      if (!this.doConfig) {
        this.$store.commit("setGoodsDetail", data.data);
        this.$router.push({ path: `/goodsDetail/${item}` });
      }
    },
    doBack() {
      this.$router.go(-1);
    },
    //qiehuan
    toggle(count) {
      if (count > 0) {
        this.doConfig = true;
      }
    },
    saveModify() {
      this.doConfig = false;
    },

    //全选全不选
    changeSingle() {
      this.changeAll = true;
      for (let i in this.cartInfo) {
        if (!this.selects[i]) {
          this.changeAll = false;
          break;
        }
      }
    },
    doChangeAll() {
      for (let i in this.cartInfo) {
        this.selects[i] = this.changeAll;
      }
      console.log(this.selects);
    },

    doDelete() {
      this.$store.commit("setShoppingCart", {
        query: "delete",
        datas: this.selects
      });
      this.doConfig = false;
      for (const key in this.selects) {
        if(this.selects[key]){
          console.log(key);
          delete(this.selects[key]);
        }
      }
    },
    // modifyCount(i,isAdd){
    //     if(isAdd){

    //         this.cartInfo[i].count++

    //     }else{
    //         if(this.cartInfo[i].count>1){
    //             this.cartInfo[i].count--
    //         }
    //     }
    //     //TODO 让DOM重新渲染 不明白问王叔
    //    this.show=!this.show;
    // },
    modifyCount(i, isAdd) {


      // this.cartInfo[i].count++;
      // let data=JSON.stringify(this.cartInfo)

      // this.$store.commit("setShoppingCart", {query:"edit",datas:data});




      this.$store.commit("setShoppingCart", {
        query: "edit",
        datas: { i, isAdd }
      });


      //TODO 让DOM重新渲染 不明白问旺叔
      // this.show = !this.show;
    },

    //用方法不会读缓存
    howMany() {
      let count = 0;
      for (const key in this.selects) {
        if (this.selects[key]) {
          count++;
        }
      }
      return count;
    },
    howMuch() {
      let count = 0;
      for (let i in this.cartInfo) {
        if (this.selects[i]) {
          count += this.cartInfo[i].data.price * this.cartInfo[i].count;
        }
      }
      return count;
    },

    // cartInfo() {
    //   return this.$store.getters.shoppingCart;
    // },

    bscrollInit() {
      console.log(this, "2222");
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new Bscroll(this.$refs.wrapper6, {
            click: true
          });
        } else {
          this.scroll.refresh();
        }
      });
    }
  },
  computed: {
    cartInfo: {
      cache:false,
      get(){

        return this.$store.getters.shoppingCart;
      }
    },

    //会有缓存
    // howMany() {
    //   let count = 0;
    //   for (const key in this.selects) {
    //     if (this.selects[key]) {
    //       count++;
    //     }
    //   }
    //   return count;
    // },
    // howMuch() {
    //   let count = 0;
    //   for (let i in this.cartInfo) {
    //     if (this.selects[i]) {
    //       count += this.cartInfo[i].data.price * this.cartInfo[i].count;
    //     }
    //   }
    //   return count;
    // }

    //有疑问（已解决 vuex无法监视对象中属性的值得改变）
    // goodsCount(){
    //     let count=0;
    //     for (const key in this.$store.getters.shoppingCart) {
    //        count++
    //     }
    //     return count;
    //     // return Object.keys(this.cartInfo).length;
    // }
    // goodsCount(){

    //     return this.$store.getters.getShoppingCartCount;
    // }
  },
  watch: {
    selects: {
      handler() {
        console.log(1);
      },
      deep: true
    },
    cartInfo: {
      handler() {
        console.log(1);
      },
      deep: true
    }
  },
  mounted() {
    this.bscrollInit();
  }
};
</script>
<style lang="less">
.ssc-wrap {
  background-color: #eee;
  input {
    @size: 0.35rem;
    -webkit-appearance: none;
    width: @size;
    height: @size;
    border-radius: 50%;
    border: 1px solid #999;
    outline: none;
    &:checked {
      background: url(https://s10.mogucdn.com/img/x6/img/checkbox.png) 0 0
        no-repeat;
      background-size: 100% auto;
      border: none;
    }
  }
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  padding: 0.8rem 0;
  > .ssc-topNav {
    position: fixed;
    top: 0;
    left: 0;
    height: 0.8rem;
    background-color: #fff;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    text-align: center;
    font-size: 0.37rem;
    border-bottom: 1px solid #ccc;
    > .ssc-back {
      width: 20%;
      height: 100%;
      line-height: 0.8rem;
      padding-right: 0.5rem;
    }
    > .ssc-ccartTitle {
      width: 60%;
      height: 100%;
      line-height: 0.8rem;
    }
    > .ssc-modify {
      width: 20%;
      height: 100%;
      line-height: 0.8rem;
      padding-right: 0.3rem;
      > span {
        font-size: 0.28rem;
      }
    }
    > .ssc-finish {
      width: 20%;
      height: 100%;
      line-height: 0.8rem;
      font-size: 0.28rem;
    }
  }
  > .ssc-content {
    background-color: #eee;
    height: 100%;
    > .ssc-noGoods {
      margin-top: 2.7rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      > .ssc-noGoodsBG {
        @length: 2.5rem;
        width: @length;
        height: @length;
        line-height: @length;
        text-align: center;
        border-radius: 50%;
        background-color: #ccc;

        > i {
          font-size: 1.5rem;
          color: #fff;
        }
      }
      > span {
        display: inline-block;
        margin-top: 0.3rem;
        font-size: 0.3rem;
        color: #555;
      }
      > .ssc-goHomePage {
        margin-top: 0.3rem;
        padding: 0.1rem 0.5rem;
        color: #fff;
        font-size: 0.25rem;
        background-color: #ff5777;
        border-radius: 0.05rem;
      }
    }
    > .ssc-goodsList {
      .ssc-singleGoods {
        padding: 0.3rem 0;
        background-color: #fff;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        margin-top: 0.3rem;
        > .contain {
          display: flex;

          .ssc-select {
            width: 10%;
            input {
              margin-top: 0.5rem;
            }
          }
          .ssc-goodsImage {
            padding: 0 0.2rem 0 0;
            img {
              height: 1.7rem;
            }
          }
          .ssc-modifyWrap {
            width: 75%;
            .ssc-priceInfo {
              display: flex;
              justify-content: space-between;
              align-items: center;
              p {
                height: 0.85rem;
                font-size: 0.22rem;
                color: #444;
              }
              .ssc-priceWrap {
                span {
                  font-size: 0.3rem;
                  color: #333;
                }
                del {
                  color: #bbb;
                }
              }
              span:last-child {
                color: #bbb;
              }
            }
            .ssc-modifyArea {
              ul {
                margin: 0.4rem 0 0 0.8rem;
                li {
                  float: left;
                  width: 1rem;
                  height: 0.6rem;
                  font-size: 0.4rem;
                  line-height: 0.5rem;
                  border: 1px solid #aaa;
                  margin-left: -1px;
                  text-align: center;
                  &:first-child {
                    margin-left: 0;
                  }
                }
                .cantReduce {
                  background-color: #eee;
                  color: #aaa;
                }
              }
            }
          }
        }
      }
    }
  }
  > .ssc-bottom {
    background-color: #fff;

    position: fixed;
    bottom: 0;
    left: 0;
    height: 0.8rem;
    > .contain {
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      > .ssc-selectAll {
        display: flex;
        align-items: center;
        font-size: 0.3rem;
        span {
          color: #ff5777;
          text-indent: 0.2rem;
        }
      }
      > .ssc-bottomRight {
        padding: 0.1rem 0.5rem;
        color: #fff;
        font-size: 0.25rem;
        background-color: #ff5777;
      }
    }
  }
}
</style>